.tab-auxiliary {
	min-height: 100%;
	.help {
		padding: 10px;
		background-color: #ffcb18;
		margin-bottom: 10px;
	}
	.toolbox {
		font-weight: bold;
        padding: 1rem 0;
        form {
            display: flex;
            gap: 0.5rem;
        }
	}
	.range {
		.marker {
			background: var(--primary-500);
			border-radius: 3px;
			position: absolute;
			left: 50%;
			top: 2rem;
			height: 1rem;
			width: 6px;
			margin-left: -3px;
			z-index: 1000;
		}
		position: relative;
		padding-top: 1rem;
		padding-left: 0;
		padding-bottom: 0.5rem;
		border-bottom: 1px solid var(--surface-500);
		&:first-child {
			border-top: 0;
		}
		&:last-child {
			border-bottom: 0;
		}
		>.buttons {
			position: absolute;
			top: 0;
			right: 0;
			.a {
				padding: 2px;
			}
		}
		.channel {
			border: 1px solid var(--surface-500);
			border-radius: 3px;
			margin-bottom: 3px;
		}
		.channel-slider {
            width: 100%;
            margin-right: 1.5rem;
		}
	}
	.channel-slider {
		.noUi-connect {
			background: var(--primary-500);
			border-radius: 0.25rem;
		}
	}
	.mode.on {
		.info {
			background: var(--primary-500);
			color: black;
		}
		&:nth-child(odd) {
			.info {
				background: var(--primary-500);
			}
		}
        .buttons {
            a {
                background-color: var(--primary-300);
                color: black;
                &:hover {
                    background-color: var(--primary-200);
                    color: black;
                }
            }
        }
	}
	.mode.off {
		.info {
			background: var(--surface-300);
			color: var(--surface-950);
		}
		&:nth-child(odd) {
			.info {
				background: var(--surface-300);
			}
		}
        .buttons {
            a {
                background-color: var(--surface-400);
                color: var(--surface-950);
                &:hover {
                    background-color: var(--surface-500);
                    color: var(--surface-950);
                }
            }
        }
	}
	.mode.disabled {
		.info {
			background: var(--error-transparent-4);
			color: var(--text);
            .buttons {
                a {
                    background-color: var(--error-500);
                    &:hover {
                        background-color: var(--error-400);
                    }
                }
            }
		}
	}
	.modes {
		width: 100%;
	}
	.mode {
		background-color: var(--surface-200);
		vertical-align: top;
		display: flex;
        margin-bottom: 0.5rem;
        border-radius: 0.5rem;
        overflow: hidden;
        min-height: 6.5rem;
		.name {
            padding: 0.5rem;
		}
		.info {
			text-align: center;
			width: fit-content;
			white-space: nowrap;
			position: relative;
			background-color: var(--surface-300);
            padding: 0.5rem;
			.name {
				font-weight: bold;
				font-size: 1.0em;
			}
			.buttons {
				a {
					padding: 0.25rem 0.5rem;
					border-radius: 0.5rem;
					cursor: pointer;
					margin: 3px;
					display: block;
				}
			}
		}
		.range {
            display: flex;
			.channelInfo {
                padding: 0 1.5rem;
                display: flex;
                flex-direction: column;
                align-items: center;
			}
		}
	}
	.ranges {
        width: 100%;
	}
	.link {
		padding-top: 1rem;
		padding-bottom: 0.5rem;
		border-bottom: 1px solid var(--surface-500);
		background-color: var(--surface-200);
        display: flex;
        gap: 0.5rem;
		&:first-child {
			border-top: 0;
		}
		&:last-child {
			border-bottom: 0;
		}
        .delete {
            a {
                margin-top: 0.35rem;
            }
        }
        .modeInfo {
            padding: 0 1.5rem;
        }
        .linkLogic {
            margin-top: 0.25rem;
        }
	}
	.logic {
		border: 1px solid var(--surface-700);
		border-radius: 3px;
	}
	.buttons {
		a {
			text-align: center;
			font-weight: bold;
			background-color: var(--surface-400);
			color: var(--text);
			transition: all ease 0.3s;
			&:hover {
				background-color: var(--surface-500);
				opacity: 1.0;
				transition: all ease 0.3s;
			}
		}
	}
	.delete {
		a {
			height: 15px;
			width: 15px;
			transition: all ease 0.3s;
			opacity: 0.3;
			position: relative;
			margin-right: 5px;
			margin-top: -9px;
			background-image: url('../../images/icons/close1.svg');
			background-repeat: no-repeat;
			background-position: center 100%;
			display: block;
			&:hover {
				transition: all ease 0.3s;
				opacity: 0.6;
			}
		}
	}
}
#tab-auxiliary-templates {
	display: none;
}
@media all and (max-width: 575px) {
	.tab-auxiliary {
		.mode {
			flex-wrap: wrap;
            height: fit-content;
			.info {
				width: 100%;
				border-bottom: 0;
                display: flex;
                flex-direction: row-reverse;
                justify-content: space-between;
                align-items: center;
				.name {
					text-align: left;
					min-height: auto;
                    margin-right: auto;
				}
				.buttons {
					right: 0;
					width: auto;
					display: flex;
				}
                .helpicon {
                    margin-top: 0;
                }
			}
            // offset "add" button for ARM mode since the "link" button is hidden
            // keeps the layout consistent with other modes
            &:first-of-type {
                .buttons {
                    margin-left: 2.5rem;
                }
            }
			.ranges {
				width: 100%;
				max-width: 100%;
			}
			.range {
				.channelInfo {
					display: flex;
					margin: 0 10px;
					width: 100%;
					flex-wrap: wrap;
				}
			}
		}
		.range {
			display: flex;
			height: auto;
			flex-wrap: wrap;
			.channel-slider {
				width: 100%;
				margin: 0.5rem 1rem 3.5rem 1rem;
			}
		}
		.limits {
			width: 100%;
			justify-content: space-between;
			display: flex;
		}
		.delete {
			a {
				margin-top: 15px;
				margin-right: 10px;
				position: absolute;
				top: 0;
				right: 0;
			}
		}
		.link {
			height: auto;
			display: flex;
			padding-bottom: 10px;
		}
	}
}
